---
title: Aggiungi delle icone ai link esterni
description: Impara come installare un plugin rehype per aggiungere icone ai link esterni nei tuoi file Markdown.
i18nReady: true
type: recipe
---

import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'

Usando un plugin rehype, puoi identificare e modificare i link nei tuoi file Markdown che puntano a siti esterni. Questo esempio aggiunge icone alla fine di ogni link esterno, in modo che i visitatori sappiano che stanno lasciando il tuo sito.

## Prerequisiti
- Un progetto Astro che usa Markdown per le pagine.

## Ricetta

1. Installa il plugin `rehype-external-links`.

    <PackageManagerTabs>
        <Fragment slot="npm">
        ```shell
        npm install rehype-external-links
        ```
        </Fragment>
        <Fragment slot="pnpm">
        ```shell
        pnpm add rehype-external-links
        ```
        </Fragment>
        <Fragment slot="yarn">
        ```shell
        yarn add rehype-external-links
        ```
        </Fragment>
      </PackageManagerTabs>

2. Importa il plugin nel tuo file `astro.config.mjs`.

  Passa `rehypeExternalLinks` all'array `rehypePlugins`, insieme a un oggetto di opzioni che include una proprietà `content`. Imposta la proprietà `type` su `text` se vuoi aggiungere del testo semplice alla fine del link. Per aggiungere invece HTML alla fine del link, imposta la proprietà `type` su `raw`.

    ```ts
    // ...
    import rehypeExternalLinks from 'rehype-external-links';

    export default defineConfig({
      // ...
      markdown: {
        rehypePlugins: [
          [
            rehypeExternalLinks,
            {
              content: { type: 'text', value: ' 🔗' }
            }
          ],
        ]
      },
    });
    ```

:::note
  Il valore della proprietà `content` [non è rappresentato nell'albero di accessibilità](https://developer.mozilla.org/en-US/docs/Web/CSS/content#accessibility_concerns). Pertanto, è meglio chiarire che il link è esterno nel contenuto circostante, piuttosto che fare affidamento solo sull'icona.
:::

## Risorse
- [rehype-external-links](https://www.npmjs.com/package/rehype-external-links)
